<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.ico?v=5.1.4">


  <link rel="mask-icon" href="/images/facicon.ico?v=5.1.4" color="#222">





  <meta name="keywords" content="HTML,CSS,">





  <link rel="alternate" href="/atom.xml" title="Key" type="application/atom+xml">






<meta name="description" content="CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 语义化标签 没有样式的情况下，网页结构组织有序，并且有良好的可读性。 便于搜索引擎优化SEO">
<meta name="keywords" content="HTML,CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS入门">
<meta property="og:url" content="https://blog.qipo.net/2017/08/15/CSS/index.html">
<meta property="og:site_name" content="Key">
<meta property="og:description" content="CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 语义化标签 没有样式的情况下，网页结构组织有序，并且有良好的可读性。 便于搜索引擎优化SEO">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://assets.qipo.net/css.jpg">
<meta property="og:image" content="http://assets.qipo.net/font-size.jpg">
<meta property="og:image" content="http://assets.qipo.net/unicode.jpg">
<meta property="og:image" content="http://assets.qipo.net/line-height.jpg">
<meta property="og:updated_time" content="2020-06-04T08:27:51.129Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS入门">
<meta name="twitter:description" content="CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 语义化标签 没有样式的情况下，网页结构组织有序，并且有良好的可读性。 便于搜索引擎优化SEO">
<meta name="twitter:image" content="http://assets.qipo.net/css.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://blog.qipo.net/2017/08/15/CSS/">





  <title>CSS入门 | Key</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Key</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://blog.qipo.net/2017/08/15/CSS/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Key">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Key">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">CSS入门</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-15T08:16:54+08:00">
                2017-08-15
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/CSS/" itemprop="url" rel="index">
                    <span itemprop="name">CSS</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  5.4k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  21
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。<br>CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。</p>
<h3 id="语义化标签"><a href="#语义化标签" class="headerlink" title="语义化标签"></a>语义化标签</h3><ol>
<li>没有样式的情况下，网页结构组织有序，并且有良好的可读性。</li>
<li>便于搜索引擎优化SEO,（提高网站流量，提高搜索引擎的排名）</li>
<li>尽量使用语义化的标签</li>
</ol>
<h3 id="语义化原则"><a href="#语义化原则" class="headerlink" title="语义化原则"></a>语义化原则</h3><ol>
<li>重语义的地方多用有语义的标签,比如<code>h</code>和<code>p</code>等等,少用没有语义的标签比如<code>div</code>.<code>span</code>等等.</li>
<li>如果有的地方可以用<code>p</code>又可以用<code>div</code>,优先选用<code>p</code>标签(结构更清晰,特别是文字段落).</li>
<li>少用纯样式标签,可以用CSS样式.如果有强调的地方,可以考虑<code>strong</code>.<code>em</code>等有强调语义的标签.</li>
</ol>
<h3 id="CSS的作用"><a href="#CSS的作用" class="headerlink" title="CSS的作用"></a>CSS的作用</h3><ul>
<li>CSS的主要目的:控制网页中元素的样式</li>
<li>CSS可以让我们从HTML结构和样式分离出来.</li>
<li>CSS可以让我们专注代码.代码更少,语义更好,搜索更容易.</li>
</ul>
<h3 id="CSS规则"><a href="#CSS规则" class="headerlink" title="CSS规则"></a>CSS规则</h3><p>使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下:<br>选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</p>
<p>在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区分。</p>
<p>比如：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="标签类型"><a href="#标签类型" class="headerlink" title="标签类型"></a>标签类型</h3><p>HTML标记一般分为块标记和行内标记两种类型，它们也称块元素和行内元素。</p>
<h4 id="行内元素"><a href="#行内元素" class="headerlink" title="行内元素"></a>行内元素</h4><p>行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。<br>常见的行内元素有<code>&lt;strong&gt;</code>、<code>&lt;b&gt;</code>、<code>&lt;em&gt;</code>、<code>&lt;i&gt;</code>、<code>&lt;del&gt;</code>、<code>&lt;s&gt;</code>、<code>&lt;ins&gt;</code>、<code>&lt;u&gt;</code>、<code>&lt;a&gt;</code>、<code>&lt;span&gt;</code>等，其中<code>&lt;span&gt;</code>标记最典型的行内元素。<code>&lt;span&gt;</code>就是一个容器,没有任何含义.</p>
<h4 id="块元素"><a href="#块元素" class="headerlink" title="块元素"></a>块元素</h4><p>每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。<br>常见的块元素有<code>&lt;h1&gt;~&lt;h6&gt;</code>、<code>&lt;p&gt;</code>、<code>&lt;div&gt;</code>、<code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code>、<code>&lt;li&gt;</code>等，其中<code>&lt;div&gt;</code>标记是最典型的块元素.<br><code>&lt;div&gt;</code>也是一个容器,没有任何含义.</p>
<blockquote>
<p> 块级元素默认的宽度和父元素一样,width,height都可以使用百分比设置，但是百分比都是相对于父元素</p>
</blockquote>
<h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><p>在行内元素中有几个特殊的标签<code>&lt;img&gt;</code>.<code>&lt;input&gt;</code>.<code>&lt;td&gt;</code>,可以对他们设置宽高和对齐属性,有些资料可能会称他们为行内块元素.</p>
<blockquote>
<p> 标签分类:<br>   块元素,占据整行<br>   行元素，根据内容填充<br>   块，行是可以相互转换的！！<br> 元素嵌套:<br>     块级元素可以嵌套行元素，也可以嵌套块元素<br>     行元素，只能嵌套行元素，不能嵌套块元素</p>
</blockquote>
<h3 id="CSS选择器"><a href="#CSS选择器" class="headerlink" title="CSS选择器"></a>CSS选择器</h3><p>要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，CSS基础(还有很多)选择器有四种。<br>如下:</p>
<ul>
<li>标签选择器</li>
<li>类选择器</li>
<li>id选择器</li>
<li>通配选择器</li>
</ul>
<h4 id="标签选择器"><a href="#标签选择器" class="headerlink" title="标签选择器"></a>标签选择器</h4><p>标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：<br><code>标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</code></p>
<p>标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式<br>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>标签选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">      p&#123;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">color</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello world<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h4><p>类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：<br><code>.className {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</code><br>类选择器最大的优势是可以为元素对象定义单独或相同的样式。<br>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>类选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.kai</span>&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">color</span><span class="selector-pseudo">:blue</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"kai"</span>&gt;</span>王凯<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h4><p>id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：<br><code>idName {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</code><br>该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。<br>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>id选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#t</span>&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">color</span><span class="selector-pseudo">:green</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"t"</span>&gt;</span>我是中国人<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="通配选择器"><a href="#通配选择器" class="headerlink" title="通配选择器"></a>通配选择器</h4><p>通配符选择器用“<em>”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下:<br>`</em> {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }`</p>
<p>比如：清除当前文档中所有元素的外边距和内边距<br>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>通配选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined">*&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">margin</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>打招呼<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello,大家好!<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h4><p>后代选择器是以空格作为分隔符的.</p>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>后代选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined">div p&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">color</span><span class="selector-pseudo">:yellow</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>在上面的实例中,其中前面3个hello是黄色的,由此可以看出,后代选择器,不管后面的是前面的儿子辈还是孙子辈,只要是后代就会选择.当然后代选择器还能与其他类型的选择器连用.</p>
<h4 id="交集选择器"><a href="#交集选择器" class="headerlink" title="交集选择器"></a>交集选择器</h4><p>选择两个集合中的共同的部分,交集选择器中间是连续写，没有空格.<br>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>交集选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">p</span><span class="selector-class">.cla</span><span class="selector-id">#py</span>&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">color</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="undefined">      font: 40px "宋体";</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"cla"</span> <span class="attr">id</span>=<span class="string">"py"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="并集选择器"><a href="#并集选择器" class="headerlink" title="并集选择器"></a>并集选择器</h4><p>对多个集合中的所有的内容合并在一起进行设置。并集以“,”作为分隔符<br>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>并集选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">    p , h1 &#123;</span></span><br><span class="line"><span class="undefined">      color: blue;</span></span><br><span class="line"><span class="undefined">      font-size: 30px;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>大哥,我错了我<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="伪类选择器"><a href="#伪类选择器" class="headerlink" title="伪类选择器"></a>伪类选择器</h4><p>伪类选择器有很多种,现在列出关于鼠标的几个伪类:</p>
<ul>
<li>Link:标签原本样式（如果在这个属性中设置样式优先级要高于标签选择器）</li>
<li>Visited:标签被访问以后的样式。</li>
<li>Hover:鼠标悬停在标签上会触发的样式。</li>
<li>Active:当点击（激活）标签时的样式。</li>
</ul>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>伪类<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">      a &#123;</span></span><br><span class="line"><span class="undefined">        font-size: 50px;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="comment">/*伪类，link初始样式*/</span></span></span><br><span class="line"><span class="css">      <span class="selector-tag">a</span><span class="selector-pseudo">:link</span>&#123;</span></span><br><span class="line"><span class="undefined">        color: black;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="comment">/* 鼠标悬停的效果*/</span></span></span><br><span class="line"><span class="css">      <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="undefined">        color: yellow;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="comment">/*激活状态，鼠标按下*/</span></span></span><br><span class="line"><span class="css">      <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span></span><br><span class="line"><span class="undefined">        color: green;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="comment">/*访问过的链接*/</span></span></span><br><span class="line"><span class="css">      <span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;</span></span><br><span class="line"><span class="undefined">        color: pink;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="selector-class">.one</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="undefined">        color: purple;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="selector-class">.one</span><span class="selector-pseudo">:active</span> &#123;</span></span><br><span class="line"><span class="undefined">        color: black;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">      /*</span></span><br><span class="line"><span class="undefined">      所有的元素都有link,visited,,hover,active伪类.</span></span><br><span class="line"><span class="undefined">      但是只有a,才都可以设置。其他元素hover,active有效。</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">      考虑到浏览器的兼容性问题：</span></span><br><span class="line"><span class="undefined">      这四个伪类在a元素要想都有效果，需要按照顺序：link  visited hover  active</span></span><br><span class="line"><span class="undefined">      */</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https:/www.tmall.com"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"one"</span>&gt;</span>div的颜色变化<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="CSS三种样式类型"><a href="#CSS三种样式类型" class="headerlink" title="CSS三种样式类型"></a>CSS三种样式类型</h3><h4 id="行内样式"><a href="#行内样式" class="headerlink" title="行内样式"></a>行内样式</h4><p>所有的样式都是在写标签的内部，只能作用在这个标签上面。（一般情况下不建议使用，我们单独学习css的目的就是页面的结构和样式的分离,我们不能反其道而行之。<br><code>&lt;p style=&quot;color:red;&quot;&gt;这是CSS行内样式&lt;/p&gt;</code></p>
<h4 id="嵌套样式"><a href="#嵌套样式" class="headerlink" title="嵌套样式"></a>嵌套样式</h4><p>写在head中，并且用style标签包含。这也是我们比较常用的一种。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">p, a &#123;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">color</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span>   </span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/resource/k111/前端基础知识/class-003/#"</span>&gt;</span>a标签<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="外部样式"><a href="#外部样式" class="headerlink" title="外部样式"></a>外部样式</h4><p>将CSS编写为单独的文件,需要在head中引入。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"./test.css"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>06.html<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>CSS文件:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"><span class="comment">/* 指定编码格式*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意：</p>
</blockquote>
<ol>
<li>如果通过开发人员工具来看拥有外部样式的页面的时候，那么我们会发现请求至少有两条：其中一条页面主体内容的请求，另一条应该就是外部样式的请求。</li>
<li>如果页面上有外部样式的请求，会跟主页面的解析同时进行。</li>
</ol>
<h4 id="三种样式类型对比"><a href="#三种样式类型对比" class="headerlink" title="三种样式类型对比"></a>三种样式类型对比</h4><p><img src="http://assets.qipo.net/css.jpg" alt></p>
<h3 id="CSS的三大特性"><a href="#CSS的三大特性" class="headerlink" title="CSS的三大特性"></a>CSS的三大特性</h3><h4 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h4><p>就是页面中的一些标签的属性可以继承给子标签,但是继承还是限制的,比如a的颜色，块级元素的高度等等。<br>一般情况下，所有的与文字图片的大小样式相当的属性都可以继承:font-x,line-x,一些标签的宽高也可以继承。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> div &#123;</span></span><br><span class="line"><span class="undefined">    font-size: 10px;</span></span><br><span class="line"><span class="undefined"> &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>继承div的字体设置<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="层叠"><a href="#层叠" class="headerlink" title="层叠"></a>层叠</h4><p>页面的样式是多项属性设置进行叠加的结果。对一个元素不同样式的多次设置会进行效果叠加，同一样式会覆盖</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> div p &#123;</span></span><br><span class="line"><span class="undefined">    color: red;</span></span><br><span class="line"><span class="undefined"> &#125;</span></span><br><span class="line"><span class="css"> <span class="selector-class">.p1</span> &#123;</span></span><br><span class="line"><span class="undefined">    font-size: 20px;</span></span><br><span class="line"><span class="undefined"> &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"p1"</span>&gt;</span>层叠效果<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="优先级"><a href="#优先级" class="headerlink" title="优先级"></a>优先级</h4><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>css的优先级问题，重点!!!<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">     <span class="selector-id">#oneId</span> &#123;</span></span><br><span class="line"><span class="undefined">       color: green;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">     <span class="selector-class">.one</span> &#123;</span></span><br><span class="line"><span class="css">       <span class="selector-tag">color</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">     p &#123;</span></span><br><span class="line"><span class="undefined">       /*</span></span><br><span class="line"><span class="undefined">       !important 用于确定最高优先级</span></span><br><span class="line"><span class="undefined">       */</span></span><br><span class="line"><span class="undefined">       color: yellow !important;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">     <span class="selector-class">.two</span> &#123;</span></span><br><span class="line"><span class="undefined">       color: purple;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">     <span class="selector-id">#twoId</span> &#123;</span></span><br><span class="line"><span class="undefined">       color: pink;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">     <span class="selector-class">.three-1</span> &#123;</span></span><br><span class="line"><span class="undefined">       color: red;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">     <span class="selector-tag">div</span><span class="selector-class">.three-1</span> &#123;</span></span><br><span class="line"><span class="undefined">       color: yellow;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">     <span class="selector-tag">div</span> <span class="selector-class">.three-2</span> &#123;</span></span><br><span class="line"><span class="css">       <span class="selector-tag">color</span><span class="selector-pseudo">:green</span>;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">    css的选择器规则，是按照从右到左寻找的！！！！！</span></span><br><span class="line"><span class="comment">   --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">    优先级的计算公式(在元素本身上)：</span></span><br><span class="line"><span class="comment">    !important &gt; 行内style &gt; id &gt; class &gt; 标签 &gt; 继承 &gt; 浏览器的默认</span></span><br><span class="line"><span class="comment">    计算公式：在同一个css的规则中,默认优先级为0</span></span><br><span class="line"><span class="comment">     出现一次 标签，优先级加 1</span></span><br><span class="line"><span class="comment">     出现一次 class，优先级加 10</span></span><br><span class="line"><span class="comment">     出现一次 id ,优先级加 100</span></span><br><span class="line"><span class="comment">    优先级相同，最后的设置有效</span></span><br><span class="line"><span class="comment">    --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"one"</span> <span class="attr">id</span>=<span class="string">"oneId"</span>&gt;</span></span><br><span class="line">      div元素</span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"two"</span> <span class="attr">id</span>=<span class="string">"twoId"</span>  <span class="attr">style</span>=<span class="string">"color:brown;"</span>&gt;</span>请问p元素是什么颜色？？？<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!----&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"three-1 three-2"</span>&gt;</span>div的颜色？？？<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="CSS样式属性"><a href="#CSS样式属性" class="headerlink" title="CSS样式属性"></a>CSS样式属性</h3><h4 id="font字体属性"><a href="#font字体属性" class="headerlink" title="font字体属性"></a>font字体属性</h4><p>font-size</p>
<p>font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。</p>
<p><img src="http://assets.qipo.net/font-size.jpg" alt></p>
<p>font-family:字体</p>
<p>font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：<br>p {font-family: “宋体”,“微软雅黑”;}<br>可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。</p>
<p>注意以下几点：</p>
<ul>
<li>各种字体之间必须使用英文状态下的逗号隔开。</li>
<li>中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。</li>
<li>如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。</li>
<li>尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。</li>
<li>使用unicode对中文字体进行编码。<br>在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。</li>
</ul>
<p><img src="http://assets.qipo.net/unicode.jpg" alt></p>
<p>font-weight</p>
<p>font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。</p>
<p>font-style</p>
<p>font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：<br>normal：默认值，浏览器会显示标准的字体样式。<br>italic：浏览器会显示斜体的字体样式。<br>oblique：浏览器会显示倾斜的字体样式。</p>
<h4 id="font综合设置"><a href="#font综合设置" class="headerlink" title="font综合设置"></a>font综合设置</h4><p>font属性用于对字体样式进行综合设置，其基本语法格式如下：</p>
<figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123;</span><br><span class="line">  <span class="built_in">font</span>: <span class="built_in">font</span>-<span class="built_in">style</span> <span class="built_in">font</span>-weight <span class="built_in">font</span>-size/line-<span class="built_in">height</span> <span class="built_in">font</span>-family;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。<br>其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。</p>
<h3 id="文本外观属性"><a href="#文本外观属性" class="headerlink" title="文本外观属性"></a>文本外观属性</h3><h4 id="文本颜色"><a href="#文本颜色" class="headerlink" title="文本颜色"></a>文本颜色</h4><p>color属性用于定义文本的颜色，其取值方式有如下3种：<br>预定义的颜色值，如red，green，blue等。<br>十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。<br>RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。<br>需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。</p>
<blockquote>
<p>注意: Atom有个插件<code>color-picker</code>插件,可以轻松实现颜色的选择.</p>
</blockquote>
<h4 id="字间距-letter-spacing"><a href="#字间距-letter-spacing" class="headerlink" title="字间距 letter-spacing"></a>字间距 letter-spacing</h4><p><code>letter-sapcing</code>属性用于定义字符字间距,所谓字符间距就是字符与字符之间的空白.其属性值为不同单位的数值,允许使用负值,默认为normal.</p>
<h4 id="单词间距-word-spacing"><a href="#单词间距-word-spacing" class="headerlink" title="单词间距 word-spacing"></a>单词间距 word-spacing</h4><p><code>word-spacing</code>属性用于定义英文单词之间的间距,对中文字符无效.和<code>letter-spacing</code>一样,其属性值可为不同单位的数值,允许使用负值,默认为normal.<br><code>word-spacing</code>和<code>letter-spacing</code>均可对英文进行设置,不同的是<code>letter-spacing</code>定义的是字母之间的间距,而<code>word-spacing</code>定义的为英文单词之间的间距.</p>
<h4 id="行间距line-height"><a href="#行间距line-height" class="headerlink" title="行间距line-height"></a>行间距line-height</h4><p><code>line-height</code>属性用于设置行间距,就是行与行之间的距离,即字符的垂直距离,一般称之为行高.<code>line-height</code>常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的就是像素px.</p>
<p><img src="http://assets.qipo.net/line-height.jpg" alt></p>
<p>行高就是基线与基线之间的距离.<br>设置方式:</p>
<ol>
<li>使用百分比,那么这个行高的基数为当前标签字体的大小.<br><code>line-height: 120%;</code>表示行高为当前字体的1.2倍,子元素会继承父元素计算出的行高.</li>
<li>直接使用px进行绝对设置<br> <code>line-height: 30px;</code>直接设置当前行高为30px.</li>
<li>使用em进行相对设置<br> <code>line-height: 1.5em;</code>设置行高为当前字体的1.5倍,子元素会继承父元素计算出来的行高.</li>
<li>使用不带单位的数值<br> <code>line-height: 1.5;</code>设置行高因子为1.5,子元素会继承因子,而不是父元素的行高.</li>
</ol>
<blockquote>
<p>其行内元素设置垂直对齐一般将行高设置为高度.</p>
</blockquote>
<h4 id="文本装饰-text-decoration"><a href="#文本装饰-text-decoration" class="headerlink" title="文本装饰 text-decoration"></a>文本装饰 text-decoration</h4><p><code>text-decoration</code>属性用于设置文本的下划线,上划线,删除线等装饰效果,其可用属性值如下:</p>
<ul>
<li><code>none</code>:没用装饰(正常文本默认值),一般用于去除<code>a</code>标签的下划线.</li>
<li><code>underline</code>:下划线.</li>
<li><code>overline</code>:上划线.</li>
<li><code>line-through</code>:删除线.</li>
</ul>
<p>另外,<code>text-decoration</code>后可以赋多个值,用于给文本添加多种显示效果,例如希望文字同时有删除线和下划线效果,就可以将<code>underline</code>和<code>line-through</code>同时赋给<code>text-decoration</code>.</p>
<h4 id="水平对齐方式text-align"><a href="#水平对齐方式text-align" class="headerlink" title="水平对齐方式text-align"></a>水平对齐方式text-align</h4><p><code>text-align</code>属性用于设置文本内容的水平对齐,相当于html中的align对齐属性.其可用属性值如下:</p>
<ul>
<li><code>left</code>:左对齐(默认值)</li>
<li><code>right</code>:右对齐</li>
<li><code>center</code>:居中对齐</li>
</ul>
<blockquote>
<p>其行内元素设置水平对齐一般使用这种方法.</p>
</blockquote>
<h4 id="垂直对齐方式vertical-align-适用于行内元素"><a href="#垂直对齐方式vertical-align-适用于行内元素" class="headerlink" title="垂直对齐方式vertical-align(适用于行内元素)"></a>垂直对齐方式vertical-align(适用于行内元素)</h4><p><code>vertical-align</code>常用属性值:</p>
<ul>
<li><code>baseline</code>:将对象的内容与基线对齐</li>
<li><code>sub</code>:垂直对齐文本的下标</li>
<li><code>super</code>:垂直对齐文本的上标</li>
<li><code>top</code>:将对象的内容与对象顶端对齐</li>
<li><code>text-to</code>p:将对象的文本与对象的顶端对齐</li>
<li><code>middle</code>:将对象内容与对象的中部对齐</li>
<li><code>bottom</code>:将对象的文本与对象的底端对齐</li>
<li><code>text-bottom</code>:将对象的文本与对象的顶端对齐</li>
</ul>
<h4 id="首行缩进text-indent"><a href="#首行缩进text-indent" class="headerlink" title="首行缩进text-indent"></a>首行缩进text-indent</h4><p><code>text-indent</code>属性用于设置首行文本的缩进,其属性值可为不同单位的数值.em字符宽度的倍数.或相当于浏览器窗口宽度的百分比%,允许使用负值,建议用em作为设置单位.</p>
<h4 id="空白符处理-white-space"><a href="#空白符处理-white-space" class="headerlink" title="空白符处理 white-space"></a>空白符处理 white-space</h4><p>使用HTML制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白.在CSS中,使用<code>white-space</code>属性可设置空白符的处理方式,其属性值如下:</p>
<ul>
<li><code>normal</code>:常规(默认值),文本中的空格.空行无效,满行(到达区域边界)后自动换行.</li>
<li><code>pre</code>:预格式化,按文档的书写格式保留空格.空行原样显示.</li>
<li><code>nowrap</code>:空行空格无效,强制文本不能换行,除非遇到换行标记.内容超出元素边界也不换行,若超出浏览器页面则会自动增加滚动条.</li>
</ul>
<h3 id="背景background"><a href="#背景background" class="headerlink" title="背景background"></a>背景background</h3><h4 id="背景的具体属性"><a href="#背景的具体属性" class="headerlink" title="背景的具体属性:"></a>背景的具体属性:</h4><ul>
<li><code>background-color</code>:设置背景颜色,按照颜色的格式填写,比如:<code>red</code>,<code>#F00</code>,<code>rgb(255,0,0)</code>.</li>
<li><code>background-image</code>:设置背景图片,url(图片路径),如:<code>background-image:url(./xxx.jpg);</code>.</li>
<li><code>background-repeat</code>:设置背景图片是否平铺,<code>repeat</code>,<code>no-repeat</code>,<code>repeat-x</code>,<code>repeat-y</code>.如:<code>background-repeat:no-repeat;</code>.</li>
<li><code>background-position</code>:设置背景图片显示位置,可以使用<code>top</code>,<code>left</code>,<code>bottom</code>,<code>right</code>设置,也可以直接设置数值(x轴,y轴),如:<code>background-position:top-left;</code>.</li>
<li><code>background-attachement</code>:设置背景是否固定,fixed表示固定.如:<code>background-attachement:fixed</code>.</li>
</ul>
<h4 id="背景的综合写法"><a href="#背景的综合写法" class="headerlink" title="背景的综合写法"></a>背景的综合写法</h4><p>background: color image repeat position attachement;如:<code>background:red url(./xxx.jpg) no-repeat 12px 12px fixed;</code>.<br>这个和字体的综合设置是不同的,字体的综合设置需要必须设置其中几项,而背景不同,也没有顺序而言,即使你想设置图片的显示位置,可是position太难写,你可以直接<code>background:12px 12px;</code></p>
<blockquote>
<p>其他CSS属性可查询<a href="http://www.css88.com/book/css/" target="_blank" rel="noopener">CSS参考手册</a></p>
</blockquote>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div></div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechatpay.jpg" alt="Key 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.jpg" alt="Key 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/HTML/" rel="tag"># HTML</a>
          
            <a href="/tags/CSS/" rel="tag"># CSS</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/08/14/HTML_base/" rel="next" title="HTML基础">
                <i class="fa fa-chevron-left"></i> HTML基础
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/08/15/box/" rel="prev" title="CSS盒子模型">
                CSS盒子模型 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="Key">
            
              <p class="site-author-name" itemprop="name">Key</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">107</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">28</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/keyarea" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:wxkayle@gmail.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#语义化标签"><span class="nav-number">1.</span> <span class="nav-text">语义化标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#语义化原则"><span class="nav-number">2.</span> <span class="nav-text">语义化原则</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS的作用"><span class="nav-number">3.</span> <span class="nav-text">CSS的作用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS规则"><span class="nav-number">4.</span> <span class="nav-text">CSS规则</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标签类型"><span class="nav-number">5.</span> <span class="nav-text">标签类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#行内元素"><span class="nav-number">5.1.</span> <span class="nav-text">行内元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#块元素"><span class="nav-number">5.2.</span> <span class="nav-text">块元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#注意"><span class="nav-number">5.3.</span> <span class="nav-text">注意</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS选择器"><span class="nav-number">6.</span> <span class="nav-text">CSS选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#标签选择器"><span class="nav-number">6.1.</span> <span class="nav-text">标签选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#类选择器"><span class="nav-number">6.2.</span> <span class="nav-text">类选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#id选择器"><span class="nav-number">6.3.</span> <span class="nav-text">id选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#通配选择器"><span class="nav-number">6.4.</span> <span class="nav-text">通配选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#后代选择器"><span class="nav-number">6.5.</span> <span class="nav-text">后代选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#交集选择器"><span class="nav-number">6.6.</span> <span class="nav-text">交集选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#并集选择器"><span class="nav-number">6.7.</span> <span class="nav-text">并集选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#伪类选择器"><span class="nav-number">6.8.</span> <span class="nav-text">伪类选择器</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS三种样式类型"><span class="nav-number">7.</span> <span class="nav-text">CSS三种样式类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#行内样式"><span class="nav-number">7.1.</span> <span class="nav-text">行内样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#嵌套样式"><span class="nav-number">7.2.</span> <span class="nav-text">嵌套样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#外部样式"><span class="nav-number">7.3.</span> <span class="nav-text">外部样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#三种样式类型对比"><span class="nav-number">7.4.</span> <span class="nav-text">三种样式类型对比</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS的三大特性"><span class="nav-number">8.</span> <span class="nav-text">CSS的三大特性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#继承"><span class="nav-number">8.1.</span> <span class="nav-text">继承</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#层叠"><span class="nav-number">8.2.</span> <span class="nav-text">层叠</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#优先级"><span class="nav-number">8.3.</span> <span class="nav-text">优先级</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS样式属性"><span class="nav-number">9.</span> <span class="nav-text">CSS样式属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#font字体属性"><span class="nav-number">9.1.</span> <span class="nav-text">font字体属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#font综合设置"><span class="nav-number">9.2.</span> <span class="nav-text">font综合设置</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文本外观属性"><span class="nav-number">10.</span> <span class="nav-text">文本外观属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#文本颜色"><span class="nav-number">10.1.</span> <span class="nav-text">文本颜色</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#字间距-letter-spacing"><span class="nav-number">10.2.</span> <span class="nav-text">字间距 letter-spacing</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#单词间距-word-spacing"><span class="nav-number">10.3.</span> <span class="nav-text">单词间距 word-spacing</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#行间距line-height"><span class="nav-number">10.4.</span> <span class="nav-text">行间距line-height</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#文本装饰-text-decoration"><span class="nav-number">10.5.</span> <span class="nav-text">文本装饰 text-decoration</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#水平对齐方式text-align"><span class="nav-number">10.6.</span> <span class="nav-text">水平对齐方式text-align</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#垂直对齐方式vertical-align-适用于行内元素"><span class="nav-number">10.7.</span> <span class="nav-text">垂直对齐方式vertical-align(适用于行内元素)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#首行缩进text-indent"><span class="nav-number">10.8.</span> <span class="nav-text">首行缩进text-indent</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#空白符处理-white-space"><span class="nav-number">10.9.</span> <span class="nav-text">空白符处理 white-space</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景background"><span class="nav-number">11.</span> <span class="nav-text">背景background</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#背景的具体属性"><span class="nav-number">11.1.</span> <span class="nav-text">背景的具体属性:</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#背景的综合写法"><span class="nav-number">11.2.</span> <span class="nav-text">背景的综合写法</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-snowflake-o"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Key</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">190.8k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
